import React, { useState, useEffect, useImperativeHandle, forwardRef, useRef } from 'react';
//  forwardRef(),是一个高价组件。

const UseImperativeHandleView = forwardRef((props, ref) => {
  const input2 = useRef(null)
  const [value, setValue] = useState('')

  console.log(ref)
  // 暴露数据给ref对象
  useImperativeHandle(
    ref,
    () => {
      return {
        value,
        setValue,
        focus: () => input2.current.focus()
      }
    }
  )
  useEffect(() => {
    console.log(props)
  })
  return (
    <div>
      <h1>UseImperativeHandle 案例</h1>
      <input type="text" ref={input2} value={value} onChange={(e) => {
        setValue(e.target.value)
      }} />
    </div>
  );
})

export default UseImperativeHandleView;
